// 闯将一个路由器，并暴露出去

// 第一步：引入 createRouter 和 createWebHistory
import { createRouter, createWebHistory } from 'vue-router'
// 引入需要呈现的组件
import Home from '@/views/Home.vue'
import About from '@/views/About.vue'
import News from '@/views/News.vue'
import Detail from '@/views/Detail.vue'
import Shops from '@/views/Shops.vue'

// 第二步：创建路由器
const router = createRouter({
  // 使用 HTML5 的 history 模式
  history: createWebHistory(),
  // 路由规则
  routes: [
    {
      path: '/home',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    {
      path: '/news',
      name: 'News',
      component: News,
      children: [
        {
          path: 'detail',
          component: Detail,
          name: 'NewsDetail',
          props(route) {
            return route.query
          },
        },
      ],
    },
    {
      path: '/shops',
      name: 'Shops',
      component: Shops,
      children: [
        {
          name: 'ShopsDetail',
          path: 'detail/:id/:title/:content?', // 使用 :id/:title/:content? 定义动态路由参数，content 是可选的(因为有 ?)
          component: Detail,
          //  第一种写法 将路由收到的所有params参数作为props传递给路由组件
          props: true, // 启用 props 传递路由参数

          // 第二种写法 函数写法 可以自己决定将什么作为props参数传给路由组件
          // props(route) {
          //   return route.query
          // }

          // 第三种写法 对象写法 可以自己决定将什么作为props参数传给路由组件
          // props: { id: 1001, title: 'hello' ,content: 'world' }
        },
      ],
    },
    {
      path: '/',
      redirect: '/home',
    },
  ],
})

// 暴露路由器
export default router
